<template>
    <!-- 侧边栏 -->
    <el-aside width="200px">
        <el-scrollbar>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                :default-active="activeIndex" text-color="#fff" 
                :unique-opened="true">
                <!-- 课程设计任务栏 -->
                <el-sub-menu v-for="menu in obj.data" :key="menu.menuid" :index="menu.menuname">
                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon><span>{{ menu.menuname }}</span>
                    </template>
                    <el-menu-item-group v-for="chmenu in menu.menus" :index="'/' + chmenu.url" :key="chmenu.menuid">
                        <!-- <template #title>Group 1</template> -->
                        <el-menu-item :index="'/' + chmenu.url" @click="$router.push(chmenu.url)"><span>{{ chmenu.menuname
                        }}</span></el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { Menu as IconMenu, Message, School, Bicycle, Monitor } from '@element-plus/icons-vue'
import { buildLocaleContext } from 'element-plus';
import router from '../router/index.js';

import { useRouter, useRoute } from 'vue-router'
const route = useRoute();

const obj = reactive({
    data: [
        //学生端首页
        {
            menuid: 1,
            icon: 'li-icon-xiangmuguanli',
            menuname: '首页',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 11,
                    icon: 'icon-order-manage',
                    menuname: '首页',
                    hasThird: 'N',
                    url: "home",
                    menus: null
                },
            ]
        },
        //课程任务实践
        {
            menuid: 2,
            icon: 'li-icon-xiangmuguanli',
            menuname: '课程设计任务',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 21,
                    icon: 'icon-order-manage',
                    menuname: '查看课程设计任务',
                    hasThird: 'N',
                    url: "courseTask",
                    menus: null
                },
            ]
        },
        //校内课题实践
        {
            menuid: 3,
            icon: 'li-icon-dingdanguanli',
            menuname: '校内课题实践',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 31,
                    icon: 'icon-order-manage',
                    menuname: '查看校内实践课题',
                    hasThird: 'N',
                    url: 'innerCampus',
                    menus: null
                },
            ]
        },
        //校外课题实践
        {
            menuid: 4,
            icon: 'li-icon-dingdanguanli',
            menuname: '校外课题实践',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 41,
                    icon: 'icon-order-manage',
                    menuname: '查看校外实践课题',
                    hasThird: 'N',
                    url: 'offCampus',
                    menus: null
                },
            ]
        },
        //小组信息
        {
            menuid: 5,
            icon: 'li-icon-dingdanguanli',
            menuname: '我的选报',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 51,
                    icon: 'icon-order-manage',
                    menuname: '选报详情',
                    hasThird: 'N',
                    url: 'teamInfo',
                    menus: null
                },
                {
                    menuid: 52,
                    icon: 'icon-order-manage',
                    menuname: '邀请组员',
                    hasThird: 'N',
                    url: "team",
                    menus: null
                },
                {
                    menuid: 53,
                    icon: 'icon-order-manage',
                    menuname: '邀请详情',
                    hasThird: 'N',
                    url: 'teamApply',
                    menus: null
                },
            ]
        },
        //过程任务
        {
            menuid: 6,
            icon: 'li-icon-dingdanguanli',
            menuname: '过程任务',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 61,
                    icon: 'icon-order-manage',
                    menuname: '查看过程任务',
                    hasThird: 'N',
                    url: 'processTask',
                    menus: null
                },
            ]
        },
        // 打分评分
        {
            menuid: 7,
            icon: 'li-icon-dingdanguanli',
            menuname: '打分评分',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 71,
                    icon: 'icon-order-manage',
                    menuname: '学生互评',
                    hasThird: 'N',
                    url: 'peerAssessment',
                    menus: null
                },
                {
                    menuid: 72,
                    icon: 'icon-order-manage',
                    menuname: '企业评价',
                    hasThird: 'N',
                    url: 'companyEvaluate',
                    menus: null
                },
            ]
        },
        //个人信息
        {
            menuid: 8,
            icon: 'li-icon-dingdanguanli',
            menuname: '个人信息',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 81,
                    icon: 'icon-order-manage',
                    menuname: '个人信息',
                    hasThird: 'N',
                    url: 'personal',
                    menus: null
                },
            ]
        },
    ],

})

// function menuItem(rout){
//     // $router.push('/pathName')
//     console.log(rout)
// }

// function jump() {
//     router.push('/pathName')
// }

const activeIndex = ref('')

// const handleOpen = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }

//监控url变化 
watch(() => route.path, (newPath, oldPath) => {
    const url = '/' + newPath.split('/')[2];
    activeIndex.value = url;
    // 在这里可以执行一些你需要的操作
});
</script>



<!-- <style scoped>
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #283593;
}
.layout-container-demo .el-menu {
  border-right: none;
}
</style> -->
